<template>
    <el-dialog
        v-model="routeRootPathAddOrUpdateDialogVisible"
        :title="title"
        width="30%"
        align-center
        :show-close="false"
        :close-on-click-modal="false"
    >
        <div class="formContainer">
            <el-form :model="routeRootPathForm" :rules="routeRootPathRules" ref="routeRootPathFormRef">
                <el-form-item label="路由文根" label-width="20%" prop="routeRootPath">
                    <el-input v-model="routeRootPathForm.routeRootPath" placeholder="路由文根" clearable />
                </el-form-item>
                <el-form-item label="路由文根名称" label-width="20%" prop="routeRootName">
                    <el-input v-model="routeRootPathForm.routeRootName" placeholder="路由文根名称" clearable />
                </el-form-item>
                <el-form-item label="路由文根中文名称" label-width="20%" prop="routeRootCnName">
                    <el-input v-model="routeRootPathForm.routeRootCnName" placeholder="路由文根中文名称" clearable />
                </el-form-item>
                <el-form-item label="描述" label-width="20%" prop="routePathDescription">
                    <el-input v-model="routeRootPathForm.routePathDescription" placeholder="描述" clearable />
                </el-form-item>
                <el-form-item label="关联组件" label-width="20%" prop="componentId">
                    <el-select v-model="routeRootPathForm.componentId" clearable placeholder="关联组件" style="width: 100%">
                        <el-option :value="item.id" :label="item.componentCnName" v-for="item in componentList" :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="文根首页" label-width="20%" prop="routeMenuHome">
                    <el-select v-model="routeRootPathForm.routeMenuHome" clearable placeholder="文根首页" style="width: 100%">
                        <el-option :value="item.routeTo" :label="item.cnName" v-for="item in menuAllList" :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="文根首页跳转参数" label-width="20%" prop="routePathParam">
                    <el-input v-model="routeRootPathForm.routePathParam" placeholder="文根首页跳转参数" clearable />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancelDialog()">取 消</el-button>
                <el-button type="primary" :loading="saveLoading" @click="submitDialog()">
                    提交
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
import {ElNotification} from "element-plus";
import {routeRootPathInfoCreate, routeRootPathInfoQuery, routeRootPathInfoUpdate} from "@/request/routeRootPath";
import {componentInfoQueryNoContent} from "@/request/components";
import {menuAllInfoQuery} from "@/request/menu";

export default {
    name: "AddOrUpdateRouteRootPathDialog",
    props: ['title', 'routeRootPathForm'],
    data() {
        return {
            routeRootPathRules: {
                routeRootPath: [{ required: true, message: '路由文根不能为空', trigger: 'blur' }],
                routeRootName: [{ required: true, message: '路由文根名称不能为空', trigger: 'blur' }]
            },
            componentList: [],
            saveLoading: false,
            menuAllList: []
        }
    },
    computed: {
        routeRootPathAddOrUpdateDialogVisible() {
            return this.$store.state.routeRootPathAddOrUpdateDialogVisible;
        },
        routeRootPathSearchData() {
            return this.$store.state.routeRootPathSearchData;
        }
    },
    methods: {
        cancelDialog() {
            this.$store.state.routeRootPathAddOrUpdateDialogVisible = false;
        },
        submitDialog() {
            this.saveLoading = true
            let formEl = this.$refs['routeRootPathFormRef']
            if (!formEl) return
            formEl.validate((valid) => {
                if (valid) {
                    if (this.routeRootPathForm.id !== '') {
                        // 修改
                        routeRootPathInfoUpdate(this.routeRootPathForm).then(res => {
                            if (res.code === '200') {
                                ElNotification({
                                    title: 'Success',
                                    message: res.message,
                                    type: 'success'
                                })
                                this.saveLoading = false
                                this.$store.state.routeRootPathAddOrUpdateDialogVisible = false;
                                routeRootPathInfoQuery(this.routeRootPathSearchData).then(res => {
                                    // 查询所有组件
                                    let param = {
                                        pageInfo: {
                                            pageIndex: 1,
                                            pageSize: 10000
                                        }
                                    }
                                    componentInfoQueryNoContent(param).then(info => {
                                        // 根据componentId匹配数据
                                        let resData = res.data.dataList;
                                        for (let i = 0; i < resData.length; i++) {
                                            let data = resData[i];
                                            let filterRes = info.data.dataList.filter(res => res.id === data.componentId);
                                            if (filterRes.length > 0) {
                                                data.componentName = filterRes[0].componentCnName;
                                            }
                                        }
                                        this.$store.state.routeRootPathDataList = res.data
                                    })
                                })
                            }
                        }).catch(res => {
                            this.saveLoading = false
                        })
                    } else {
                        // 调用后端接口插入数据
                        routeRootPathInfoCreate(this.routeRootPathForm).then(res => {
                            if (res.code === '200') {
                                ElNotification({
                                    title: 'Success',
                                    message: res.message,
                                    type: 'success'
                                })
                                this.saveLoading = false
                                this.$store.state.routeRootPathAddOrUpdateDialogVisible = false;
                                routeRootPathInfoQuery(this.routeRootPathSearchData).then(res => {
                                    // 查询所有组件
                                    let param = {
                                        pageInfo: {
                                            pageIndex: 1,
                                            pageSize: 10000
                                        }
                                    }
                                    componentInfoQueryNoContent(param).then(info => {
                                        // 根据componentId匹配数据
                                        let resData = res.data.dataList;
                                        for (let i = 0; i < resData.length; i++) {
                                            let data = resData[i];
                                            let filterRes = info.data.dataList.filter(res => res.id === data.componentId);
                                            if (filterRes.length > 0) {
                                                data.componentName = filterRes[0].componentCnName;
                                            }
                                        }
                                        this.$store.state.routeRootPathDataList = res.data
                                    })
                                })
                            }
                        }).catch(res => {
                            this.saveLoading = false
                        })
                    }
                } else {
                    return false
                }
            })
        }
    },
    created() {
        let param = {
            pageInfo: {
                pageIndex: 1,
                pageSize: 10000
            },
            componentType: "CUSTOM"
        }
        componentInfoQueryNoContent(param).then(res => {
            this.componentList = res.data.dataList;
        })
        // 查询所有菜单信息
        menuAllInfoQuery().then(res => {
            this.menuAllList = res.data
        })
    }
}
</script>

<style scoped lang="less">
.formContainer {
    .selectIconsClass {
        width: 20px;
    }
}
</style>